<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script type="text/javascript" src="https://unpkg.com/view-ui-plus"></script>
    <style>
        body {
            margin: 0;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="vueContainer">
</div>
<template id="content">
    <p style="width:200px;height:100px;position:absolute; top: 0;background-color: red">
        <button @click="loadTileset()" style="padding:8px 12px;">开始剖切</button>
        <Slider v-model="data.form.boxZ" range :min="data.form.min" :max="data.form.max"
                @on-input="updateData()"></Slider>
        <Slider v-model="data.form.boxX" range :min="data.form.min" :max="data.form.max"
                @on-input="updateData()"></Slider>
        <Slider v-model="data.form.boxY" range :min="data.form.min" :max="data.form.max"
                @on-input="updateData()"></Slider>
    </p>
    <div id="MapContainer"></div>
</template>
<script src="../../config/index.js"></script>
<script src="ac-min.js"></script>
<!--<script src="test.js"></script>-->
<!--<script src="pouqie.js"></script>-->
<script>
  const { createApp, ref, onMounted, onBeforeUnmount, reactive } = Vue
  const app = createApp({
    template: `#content`,
    setup() {
      const message = ref('Hello Vue.js!')
      let data = reactive({
        form: {
          boxX: [-10, 10],
          boxY: [-10, 10],
          boxZ: [-10, 10],
          min: -100,
          max: 100
        },
        single: {
          leftZ: 0.0,
          rightZ: 0.0,
          leftX: 0.0,
          rightX: 0.0,
          leftY: 0.0,
          rightY: 0.0
        }
      })
      /**
       * 测试方法
       */
      const test = () => {
        console.log(6565)
      }
      const updateData = () => {
        data.single.leftZ = data.form.boxZ[0]
        data.single.rightZ = data.form.boxZ[1]
        data.single.leftX = data.form.boxX[0]
        data.single.rightX = data.form.boxX[1]
        data.single.leftY = data.form.boxY[0]
        data.single.rightY = data.form.boxY[1]
        console.log(data)
      }
      // 赋值
      const boder = () => {
        var tileset = window.tileset
        let radius = tileset.boundingSphere.radius
        data.single.leftZ = -radius
        data.single.rightZ = radius
        data.form.boxZ = [data.single.leftZ, data.single.rightZ]

        data.single.leftX = -radius
        data.single.rightX = radius
        data.form.boxX = [data.single.leftX, data.single.rightX]

        data.single.leftY = -radius
        data.single.rightY = radius
        data.form.boxY = [data.single.leftY, data.single.rightY]
        data.form.min = -radius
        data.form.max = radius
      }
      // 开启剖切
      const loadTileset = () => {
        boder()
        var hander = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
        // 定义一个ClippingPlaneCollection类，用来存储裁剪面
        clippingPlanes = new Cesium.ClippingPlaneCollection({
          planes: [
            // ClippingPlane对象数组集合
            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0), 0.0), // 法线方向
            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, 1.0), 0.0), // 法线方向
            new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), // 法线方向
              0.0  // 原点到平面的最短距离，设置0就好
            ),
            new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), 0.0),
            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, -1.0, 0.0), 0.0),
            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), 0.0)
          ],
          edgeColor: Cesium.Color.RED,
          edgeWidth: 1.0, // 模型被裁切部分的截面线宽
          unionClippingRegions: true //true 才能多个切割
        })

        var tileset = window.tileset
        tileset.clippingPlanes = clippingPlanes
        // tileset.debugShowBoundingVolume = viewModel.debugBoundingVolumesEnabled;
        return tileset.readyPromise.then(function() {
          var boundingSphere = tileset.boundingSphere
          var radius = boundingSphere.radius

          // viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0));

          for(var i = 0; i < clippingPlanes.length; ++i) {
            var plane = clippingPlanes.get(i)
            var planeEntity = viewer.entities.add({
              position: boundingSphere.center,
              id: 'ClipPlane' + i,
              plane: {
                dimensions: new Cesium.Cartesian2(radius * 2, radius * 2),
                material: Cesium.Color.WHITE.withAlpha(1),
                plane: new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), false),
                outline: true,
                outlineColor: Cesium.Color.WHITE
              }
            })
            console.log(planeEntity)
          }
          return tileset
        }).catch(function(error) {
          console.log(error)
        })
      }

      // 计算移动位置
      const createPlaneUpdateFunction = (plane) => {
        return function() {
          let normal = plane._normal
          let x = normal.x
          let y = normal.y
          let z = normal.z
          if(x === 0 && y === 0 && z === -1) {
            plane.distance = data.single.rightZ
            return plane
          } else if(x === 0 && y === 0 && z === 1) {
            plane.distance = -data.single.leftZ
            return plane
          } else if(x === -1 && y === 0 && z === 0) {
            plane.distance = data.single.rightX
            return plane

          } else if(x === 1 && y === 0 && z === 0) {
            plane.distance = -data.single.leftX
            return plane

          } else if(x === 0 && y === -1 && z === 0) {
            plane.distance = data.single.rightY
            return plane

          } else if(x === 0 && y === 1 && z === 0) {
            plane.distance = -data.single.leftY
            return plane

          } else {
            return plane
          }
        }
      }
      //挂载完成执行的程序
      onMounted(() => {
        console.log(1111111)

      })

      //销毁组件
      onBeforeUnmount(() => {
        // vue程序销毁时，需要清理相关资源
        console.log(22222)
      })
      return {
        message,
        data,
        test,
        createPlaneUpdateFunction,
        loadTileset,
        updateData
      }
    }
  })
  app.use(ViewUIPlus)
  app.mount('#vueContainer')
</script>
</body>
</html>
